<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <meta name="x5-fullscreen" content="true">
    <title>开心斗地主-我爱h5游戏源码</title>
    <style>
        html,body{height:100%;overflow:hidden;padding: 0;margin: 0;}
    </style>
    <script type="text/javascript">
        function startGame() {
            if (!document.createElement('canvas').getContext) {
                alert("Sorry, your browser doesn't support canvas, please use Firefox3.6+, Safari5+, Chrome, IE9+ etc.");
                return;
            }
            detectOrient();
            // playAudio();
            // let cvs = document.querySelector('canvas');
            // let ctx = cvs.getContext('2d');
            // ctx.fillStyle = 'red';
            // ctx.fillRect(10,10,20,20);
            var width = document.documentElement.clientWidth,
                height =  document.documentElement.clientHeight;
            function Block(x, y, w, h,speed){
                this.x = x || 0;
                this.y = y || 0;
                this.h =
                this.toX = this.x;
                this.toY = this.y;
                this.speed = speed ||{x:1,y:1,scale:1}
            }
            Block.prototype.move = function(){}
            Block.renderMany = function(blocks){
                let cvs = document.querySelector('canvas');
                let ctx = cvs.getContext('2d');
                setInterval(function(){
                    ctx.clearRect(0,0,width,height);
                    for(let block of blocks){
                        ctx.drawImage(img,100,100);
                        ctx.fillStyle = block.color;
                        ctx.fillRect(block.x,block.y,block.len,block.len);
                        block.move();
                    }
                },100)
            }
            let redBlock = new Block(0,0,10,'red');
            let blueBlock = new Block(200,200,20,'blue',{x:-1,y:1,scale:2})
            // Block.render(redBlock);
            // Block.renderMany([redBlock,blueBlock]);

            let cvs = document.querySelector('canvas');
            let ctx = cvs.getContext('2d');
            var img = new Image();
            img.onload = function(){
                // alert('加载完毕')
                // 将图片画到canvas上面上去！
                ctx.drawImage(img,100,100);
            }
            img.src = "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537549551&di=3f8d4d76679adcae225387f7d6b199aa&src=http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg";
        }



        // 利用 CSS3 旋转 对根容器逆时针旋转 90 度
        function detectOrient() {
            var width = document.documentElement.clientWidth,
                height =  document.documentElement.clientHeight,
                $wrapper =  document.getElementById("canvas"),
                style = "";
            if( width < height ){ // 竖屏
                style += "width:" + height + "px;";
                style += "height:" + width + "px;";
                style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
                // 注意旋转中点的处理
                style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
                style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
            }
            $wrapper.style.cssText = style;
        }
        function playAudio() {
            audioObj = createAudio("myAudioObj");
            fakeClick(function() {
                audioObj.play();
            });
        }

        function createAudio(id) {
            var audio = new Audio("sounds/bg.mp3");
            audio.loop = true;
            audio.autoPlay = true;
            audio.id = id;
            document.body.appendChild(audio);
            return audio;
        }

        function fakeClick(callback) {
            var aTag = document.createElement("a");
            aTag.id = "fakeClickLink";
            aTag.addEventListener("click", function(e) {
                e.preventDefault();
                callback();
            }, false);
            document.body.appendChild(aTag);
            if (document.createEvent) {
                var evt = document.createEvent("MouseEvents");
                if (evt.initMouseEvent) {
                    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    aTag.dispatchEvent(evt);
                }
            }
            document.body.removeChild(aTag);
        }
    </script>
</head>
<body onload="startGame();">
<canvas id="canvas" width="1280" height="666" style="background-image: url(images/bg.png); background-position: 50% 50%;"  horizontalScrollPolicy="off" verticalScrollPolicy="off" >Sorry, your browser doesn't support canvas, please use Firefox3.6+, Safari5+, Chrome, IE9+ etc.</canvas>
<audio preload="auto" src="sounds/bg.mp3" loop="" id="myAudioObj"></audio>
</body>
</html>